<template>
    <div class="home-wrap" @click.stop="hideHistoryPanel">
        <!--<a-button type="primary" shape="circle" size="small" @click="settingPanel">
            <template #icon>
                <SettingOutlined/>
            </template>
        </a-button>-->

        <div class="home-body">
            <Nav></Nav>
            <Search></Search>

            <div class="group-item" v-for="(item, index) in store.bookmark" :key="index">
                <div class="group-title">
                    <AppstoreOutlined/>
                    {{item.title}}
                </div>
                <div class="app-row app-col-space10">
                    <div class="app-col-md3 app-col-sm4 app-col-xs12" v-for="(val, idx) in item.website" :key="idx" @click="href(val)">
                        <div class="list-item shadow-lg">
                            <div class="list-body">
                                <img class="item-img" :src="val.icon" alt="">
                                <div class="item-info text-elip">
                                    <div class="item-info-title text-elip">{{val.title || '-'}}</div>
                                    <div class="item-info-desc text-elip">{{val.desc || '-'}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Foot></Foot>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {SettingOutlined, AppstoreOutlined} from '@ant-design/icons-vue';
    import {openPage} from '/src/util/index';

    import Nav from '../default/Nav.vue';
    import Search from '../default/Search.vue';
    import Foot from '../default/Foot.vue';

    export default {
        // 组件
        components: {
            SettingOutlined,
            AppstoreOutlined,
            Nav,
            Search,
            Foot,
        },
        // 数据
        data() {
            return {
                // 获取在 website.js 中的配置
                config: useStore().state.skin.listSkin,
                // vuex 状态
                store: useStore().state,
            }
        },
        // DOM未渲染前调用
        created() {
            console.log('config->', this.config);
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 打开设置面板
            settingPanel() {
                this.$store.commit('openSettingPanel');
            },
            // href
            href(obj) {
                this.$store.dispatch('clickBookmark', {
                    uwid: obj.id,
                    wid: obj.wid,
                }).then(res => {
                    openPage(obj.url, 'bookmark');
                })
            },
            // 关闭历史记录面板(设置default主题的历史面板隐藏)
            hideHistoryPanel() {
                let that = this,
                    skin = that.store.skin;
                skin.default.history.state = false;
                that.$store.commit('setSkin', skin);
            },
        }
    }
</script>

<style lang="less" scoped>
    .home-wrap {
        width: 100vw;
        height: 100vh;
        overflow-y: auto;

        .home-body {
            width: 1024px;
            padding: 10px;
            margin: 0 auto;
            border-top: 1px solid transparent;

            .group-item {
                .group-title {
                    font-size: 18px;
                    color: white;
                    margin-top: 30px;
                    margin-bottom: 10px;
                }

                .list-item {
                    padding: 10px;
                    background-color: white;
                    border-radius: 2px;
                    cursor: pointer;

                    .list-body {
                        display: flex;

                        .item-img {
                            position: relative;
                            width: 35px;
                            height: 35px;

                            &:after {
                                content: '';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                z-index: 2;
                                top: 0;
                                left: 0;
                                background: url('/src/assets/imgs/network.png') white;
                                background-size: 100%;
                            }
                        }

                        .item-info {
                            flex: 1;
                            margin-left: 5px;

                            .item-info-title {
                                height: 20px;
                                font-size: 16px;
                                line-height: 16px;
                            }

                            .item-info-desc {
                                height: 15px;
                                font-size: 14px;
                                line-height: 14px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .home-wrap {
            .home-body {
                width: 100% !important;
            }
        }

    }
</style>